<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '智能工单',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<template>
  <view>
    <view class="sticky top-[44px] left-0 w-screen bg-[#f2f2f2] z-9999">
      <wd-tabs class="tabs-wrap" v-model="tabAcive" auto-line-width @click="getList">
        <!-- :offset-top="safeAreaInsets?.top + 44" -->
        <block v-for="item in statusMap" :key="item">
          <wd-tab :title="item"></wd-tab>
        </block>
      </wd-tabs>
    </view>

    <view class="px-3 mb-3" v-for="(it, index) in dataList" :key="index">
      <view class="p-3 bg-white rounded-4 overflow-hidden relative">
        <view class="font-bold border-b-[#f2f2f2] border-b border-b-solid pb-2">
          {{ getType(it.type) }}

          <image
            v-if="it.urgentFlag"
            :src="expedited"
            mode="scaleToFill"
            class="w-6 h-6 absolute top-1 right-1"
          />
        </view>
        <view class="py-2 leading-relaxed text-sm">
          <view class="flex mt-1">
            <view class="w-20 text-[#6e6e6e]">业主：</view>
            {{ it.ownerName }}
          </view>
          <view class="flex mt-1">
            <view class="w-20 text-[#6e6e6e]">电话：</view>
            {{ it.ownerPhone }}
          </view>
          <view class="flex mt-1">
            <view class="w-20 text-[#6e6e6e]">地址：</view>
            {{ it.address }}
          </view>
          <view class="flex mt-1">
            <view class="w-20 text-[#6e6e6e]">申请时间：</view>
            {{ it.createTime }}
          </view>
          <view class="flex mt-1">
            <view class="w-20 text-[#6e6e6e] shrink-0">工单内容：</view>
            {{ it.content }}
          </view>
          <!--  v-if="it.butlerId && it.externalUserid" -->
          <view class="flex mt-1">
            <view class="w-20 text-[#6e6e6e]">聊天详情：</view>
            <wd-text
              type="primary"
              text="点击查看"
              @click="goChathistory(it.butlerId, it.externalUserid)"
            ></wd-text>
          </view>
        </view>
        <view class="border-t-[#f2f2f2] border-t border-t-solid flex justify-end">
          <view class="pt-3 flex">
            <view class="mr-2">
              <wd-button size="small" plain hairline>忽略</wd-button>
            </view>
            <wd-button size="small" @click="handleCreate(it)">去处理</wd-button>
          </view>
        </view>
      </view>
    </view>

    <wd-status-tip v-if="loading === 'finished' && dataList.length === 0" image="content" tip="" />
    <wd-loadmore :state="loading" />

    <RobotAi></RobotAi>
  </view>
</template>

<script lang="ts" setup>
import RobotAi from '@/components/robotAI.vue'
import { workOrderList, IWorkOrderCreate } from './api/index'
import { statusMap, typeServeColumns } from './dict'
import expedited from './static/image/expedited.svg'

const { safeAreaInsets } = uni.getSystemInfoSync()

const tabAcive = ref(0)

const loading = ref('loading')
const dataList = ref<IWorkOrderCreate[]>([])
const getList = async () => {
  dataList.value = []
  loading.value = 'loading'

  const params = {
    status: tabAcive.value,
    pageSize: 50,
    pageNum: 1,
  }
  const { rows } = await workOrderList(params)
  dataList.value = rows
  loading.value = 'finished'
}

onShow(() => {
  getList()
})

const handleCreate = (it: IWorkOrderCreate) => {
  uni.navigateTo({
    url: `/pages-sub/work-order/create?id=${it.id}`,
  })
}

function goChathistory(butlerId, externalUserid) {
  uni.navigateTo({
    url: `/pages/intelligent/chathistory?butlerId=${butlerId}&externalUserid=${externalUserid}`,
  })
}
const getType = (type) => {
  return typeServeColumns.find((item) => item.value === type).label
}
</script>

<style lang="scss" scoped>
.tabs-wrap {
  background-color: #f2f2f2;
  ::v-deep .wd-tabs,
  ::v-deep .wd-tabs__nav {
    background: #f2f2f2;
  }
}
</style>
